<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-16 10:20
  PageName：c_practice3_MatchColor.html
  Function：实战案例 - 网页配色
  URL：http://localhost:8080/e3_webpage_CSS3_TextStyle/c_practice3_MatchColor.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 网页配色</title>

    <style type="text/css">
        body {
            text-align: center; /* 网页居中 */
        }

        #wrap {
            width: 400px;       /* 固定包含框的宽度 */
            margin: 0 auto;     /* 网页居中 */
            text-align: left;   /* 文本左对齐 */
        }

        #header {
            height: 40px;        /* 固定高度 */
            line-height: 40px;   /* 定义行高 */
            margin: 0 0 2px 0;   /* 头部区域的外边距 */
            text-align: center;  /* 文本居中对齐 */
        }

        ul#nav {
            list-style: none;        /* 清楚项目符号 */
            margin: 2px 0 0 0;       /* 导航栏外边距 */
            padding: 10px 0 0 10px;  /* 导航栏内边距 */
            float: left;             /* 向左浮动 */
            width: 84px;             /* 固定宽度 */
            height: 190px;           /* 固定高度 */
        }

        #wrap #main {
            float: right;            /* 向右浮动 */
            height: 200px;           /* 固定高度 */
            width: 300px;            /* 固定宽度 */
            margin: 2px 0 0 2px;     /* 增加外边距 */
        }

        ul#nav li {
            line-height: 1.5em; /* 导航行高 */
        }

        #main div {
            padding: 12px 2em; /* 主体区域内边距 */
        }

        body {
            color: #FF0000;        /* 网页字体基本色，一般多为黑色或深灰色 */
            background: #99FFFF;   /* 网页背景色 */
        }

        #header {
            color: #FF0000;       /* 标题栏字体色 */
            background: #66CC66;  /* 标题栏背景色 */
        }

        ul#nav {
            color: #000;           /* 导航侧栏字体色 */
            background: #CCFF33;   /* 导航侧栏背景色 */
        }

        #wrap #main {
            color: #000;           /* 主体区域字体色 */
            background: #FF99CC;   /* 主体区域背景色 */
        }
    </style>
</head>

<body>
<div id="wrap">
    <h3 id="header">网页标题</h3>

    <ul id="nav">
        <li>链接1</li>
        <li>链接2</li>
        <li>链接3</li>
        <li>……</li>
    </ul>

    <div id="main">
        <div>正文内容……</div>
    </div>
</div>
</body>
</html>